<template>
    <div class="cdialog">
        <el-dialog v-model="dialogVisible" :show-close="false" @close="closedialog()" :width="dWidth"  :draggable="true"
            @open="openDialog()">
            <template #header="close, titleId, titleClass">
                <div class="dialog-header">
                    <div class="dialog-title">
                        <div class="title-text fs16">
                            {{ props.title }}
                        </div>
                    </div>
                    <div class="dialog-close" @click="closedialog()">
                        <svg-icon icon="close"></svg-icon>
                    </div>
                </div>
            </template>
            <div class="content">
                <slot></slot>
            </div>
        </el-dialog>
    </div>
</template>

<script setup lang="ts">
import { propTypes } from '@/utils/prop-types'
import { ref, toRefs, watch, computed } from 'vue'
const emit = defineEmits(['closeDialog', 'openDialog'])
import { isString } from 'lodash-es'
const props = defineProps({
    title: {
        type: String,
        default: () => '弹框标题'
    },
    visible: {
        type: Boolean,
        default: false
    },

    width: propTypes.oneOfType([Number, String]).def(600),
})
const dWidth = computed(() => {
    return isString(props.width) ? window.innerWidth / 1920 * (props.width as any) as number : window.innerWidth / 1920 * (props.width as any) as number
})

const { visible } = toRefs(props)
let dialogVisible = ref(false)
watch(
    visible,
    newVal => {
        dialogVisible.value = newVal
    },
    { immediate: true }
)
const closedialog = () => {
    console.log(`%c` + `关闭弹窗` + ` is running`, `font-weight: bold; color: #ffb712; background:linear-gradient(-45deg, #bd34fe 50%, #47caff 50% );background: -webkit-linear-gradient( 120deg, #bd34fe 30%, #41d1ff );background-clip: text;-webkit-background-clip: text; -webkit-text-fill-color:linear-gradient( -45deg, #bd34fe 50%, #47caff 50% ); padding: 8px 12px; border-radius: 4px;`);
    emit('closeDialog', false)
}
const openDialog = () => {
    emit('openDialog')
}
</script>

<style scoped lang="scss">
:deep(.el-dialog) {
    --el-bg-color: rgba(9, 23, 51, 0.8) !important;
}

//弹框头部
:deep(.el-dialog__header) {
    --el-text-color-primary: #1EFFFF;
    --el-text-color-regular: #fff;
    padding: 0 !important;
    width: 100%;
    height: 46px;

}

//弹框标题
:deep(.el-dialog__title) {
    margin-left: 24px;
    line-height: 64px;
}

//弹框内容部分
:deep(.el-dialog__body) {
    --el-bg-color: rgba(9, 23, 51, 0.8) !important;
    --el-text-color-regular: #fff;
}


.el-dialog .el-dialog__body {
    flex: 1;
    overflow: auto;
}

.dialog-header {
    width: 100%;
    display: flex;
    justify-content: space-between;
    height: 46px;
    align-items: center;

    .dialog-title {
        width: 389px;
        height: 100%;
        background: url('../../assets/cardImages/左弹框标题栏@2x.png') center no-repeat;
        background-size: 100% 100%;

        .title-text {
            margin-left: 30px;
            font-family: Microsoft YaHei-Bold, Microsoft YaHei;
            font-weight: bold;
            line-height: 2;
            text-shadow: 0px 4px 4px #2268F0;
            background: linear-gradient(180deg, #FFFFFF 0%, #40C6FF 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
        }
    }

    .dialog-close {
        width: 24px;
        height: 24px;
        margin-right: 10px;
        cursor: pointer;

        :deep(.svg-icon) svg {
            width: 24px;
            height: 24px;
        }
    }

}

.content {
    width: 100%;
    height: 100%;

}
</style>